<template>
  <div class="all_page">
    <!-- <h1>{{ title }}</h1> -->
    <div class="header">
      <div class="logo_box">
        <img :src="'https://hzh.woide.top' + typeObj.logo" alt="">
      </div>
      <div class="title">
        {{ typeObj.name }}
      </div>
  
    </div>
    <div class="row" id="box_row">
      <Card v-for="childrenItem of state.publishList" :key="childrenItem.id" :card-info="childrenItem" mobile="1">
      </Card>
      <div class="loadding_box" id="loadding_box">
        <a-spin :indicator="indicator" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, h, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { LoadingOutlined } from '@ant-design/icons-vue';
import { getPublishList } from "@/api/mutualaid/index";
import Card from "@/components/Card/index.vue"
const router = useRouter();
const page = ref(0);
const title = ref<string>(router.currentRoute.value.query.title as string);
let ob = ref<IntersectionObserver | null>(null)
const state = reactive({
  publishList: [] as any[]
})
const indicator = ref(h(LoadingOutlined, {
  style: {
    fontSize: '24px',
  },
  spin: true,
}));

const props = defineProps({
  type: {
    type: String,
    default: ''
  }
})

const typeObj = ref({
  logo:"",
  name:""
})

onMounted(() => {

  page.value += 1;

  ob.value = new IntersectionObserver(entries => {
    const en = entries[0];
    if (en.isIntersecting) {
      if (state.publishList.length != 0) {
        page.value += 1;
      }
    }
  }, {
    threshold: .1
  })
  ob.value.observe(document.querySelector('#loadding_box')!)
})

watch(() => page.value, async () => {
  const res = await getPublishList({
    page: page.value,
    limit: 10,
    pu_platform: router.currentRoute.value.query.type || props.type
  })
  const cureent = router.currentRoute.value.query.type || props.type;
  let defaultIndex = 0
  res.data.data.map((item: any, index: number) => {
    if (item.id == cureent) {
      defaultIndex = index;
    }
  })
  typeObj.value.logo = res.data.data[defaultIndex].logo
  typeObj.value.name = res.data.data[defaultIndex].name
  if (res.data.data[defaultIndex].list.length < 8) {
    
    state.publishList.push(...res.data.data[defaultIndex].list); 
    ob.value!.disconnect();
    indicator.value = h('span', {
      style: {
        fontSize: '14px',
        width: '100%',
        color: "#000"
      },

    }, "暂无更多数据");
  } else {
    state.publishList.push(...res.data.data[defaultIndex].list);
  }
})

// if (!router.currentRoute.value.query.type) {
//   router.push({
//     path: '/404'
//   })
// }


</script>

<style lang="scss" scoped>
.all_page {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;

  .header {
    margin: 30px 0;
    display: flex;
    align-items: center;
    .logo_box {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
     
     
    }
    .title {
        font-size: 25px;
        height: 100%;
        display: flex;
       margin-left: 20px;
      }
  }

  .loadding_box {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.card_box {
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 2px 2px 2px #eee;
    // border: 1px solid #1677ff;
  }

  .card_text {
    width: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}</style>